<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-if</title>
    <style>
        .block{
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>v-if</h1>
        <p v-if="flag">v-if基础知识,flag=true</p>
        <div v-else>v-if基础知识,flag=false</div>
        <h2>用div包裹和template包裹的区别</h2>
        <div v-if=flag class="block">
            <h2>将进酒</h2>
            <p>君不见黄河之水天上来</p>
            <p>奔流到海不复回</p>
        </div>
        <hr>
        <template v-if=flag class="block">
            <h2>将进酒</h2>
            <p>君不见黄河之水天上来</p>
            <p>奔流到海不复回</p>
        </template>
        <hr>
        <p v-if="week == 1">星期一</p>
        <p v-else-if="week==2">星期二</p>
        <p v-else-if="week==3">星期三</p>
        <p v-else-if="week==4">星期四</p>
        <p v-else>其他的</p>
        <hr>
        <div>
            <template v-if="loginType == 'telephone'">
                <label for="tel" >电话：</label>
                <input type="text" name="" id="tel" placeholder="请输入电话">
            </template>
            <template v-else>
                <label for="email" >邮箱：</label>
                <input type="text" name="" id="email" placeholder="请输入邮箱" :key="'登录方式'+this.loginType">
            </template>
            <button v-on:click="switchLogin">切换登录方式</button>
        </div>
        <hr>
        <h2>v-show的用法</h2>
        <p v-show="isShow">v-show，看的见我吗</p>
        //设置元素的display属性
        <p v-if="isShow">v-show，看的见我吗</p>
        //是否在html上渲染元素
    </div>
    <script src="./js/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                flag:true,
                week:2,
                loginType:"telephone",//email
                isShow:true,
            },
            methods:{
                switchLogin(){
                    if(this.loginType == "telephone"){
                        this.loginType = 'email'
                    }else{
                        this.loginType = 'telephone'
                    }
                }
            }
        })
    </script>

</body>
</html>